<template>
  <div>
    <div class="container">
      <div>
        <el-form :model="caseDisposeList" ref="caseDisposeList" class="select-submit-form">
          <el-row type="flex">
            <el-col :span="8">
              <el-form-item label="大病赔案号" prop="caseNo">
                <el-input placeholder="请输入大病赔案号" v-model="caseDisposeList.caseNo"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="被保险人" prop="insuredName">
                <el-input placeholder="请输入被保险人名称" v-model="caseDisposeList.insuredName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="社/医保号" prop="socialSecurityNo">
                <el-input placeholder="请输入社/医保号" v-model="caseDisposeList.socialSecurityNo"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row type="flex">
            <el-col :span="8">
              <el-form-item label="证件号" prop="insuredIdentifyNumber">
                <el-input placeholder="请输入证件号" v-model="caseDisposeList.insuredIdentifyNumber"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="任务状态" prop="taskState">
                <el-select placeholder="请选择" v-model="caseDisposeList.taskState">
                  <el-option label="正处理" value="02"></el-option>
                  <el-option label="已处理" value="03"></el-option>
                  <el-option label="退回" value="04"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <div class="select-btn-group">
                <el-button type="primary" @click="onSubmit">查询</el-button>
                <el-button type="primary" @click="resetForm('caseDisposeList')">重置</el-button>
              </div>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <template>
        <div>
          <el-divider></el-divider>
        </div>
      </template>
      <el-table
        :data="tableData"
        class="table"
        v-loading="loading"
        element-loading-text="Loading"
        ref="multipleTable"
        header-cell-class-name="table-header"
        style="margin: 30px 0;border: 1px solid #d6d9d8;">
        <el-table-column type="index" label="序号" width="55px" align="center"></el-table-column>
        <el-table-column prop="caseNo" label="大病赔案号" align="center" width="210px">
          <template  slot-scope="scope">
            <a href="#" style="color: #409EFF" @click="toCaseNo(scope.row)">{{scope.row.caseNo}}</a>
          </template>
        </el-table-column>
        <el-table-column prop="policyNo" label="保单号" align="center" width="210px"></el-table-column>
        <el-table-column prop="riskName" label="险种" align="center"></el-table-column>
        <!--<el-table-column prop="comName" label="承保机构" align="center"></el-table-column>-->
        <el-table-column prop="socialSecurityNo" label="社/医保号" align="center" width="200px"></el-table-column>
        <el-table-column prop="insuredName" label="被保险人" align="center"></el-table-column>
        <el-table-column prop="insuredIdentifyNumber" label="证件号" align="center" width="210px"></el-table-column>
        <el-table-column prop="serialNo" label="是否重开案件" align="center" width="210px">
          <template slot-scope="scope">
            <span v-if="scope.row.serialNo == '2'">是</span>
            <span v-else>否</span>
          </template>
        </el-table-column>
        <el-table-column prop="taskState" label="任务状态" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.taskState == '01'">待处理</span>
            <span v-if="scope.row.taskState == '02'">正处理</span>
            <span v-if="scope.row.taskState == '03'">已处理</span>
            <span v-if="scope.row.taskState == '04'">已退回</span>
          </template>
        </el-table-column>
        <!-- <el-table-column label="操作" width="auto" align="center">
          <template slot-scope="scope">
              <el-button v-if="scope.row.taskState == '03'" type="text" @click="toScan(scope.row)">查看</el-button>
              <el-button v-else type="text" @click="toDetail(scope.row)">登记</el-button>
          </template>
        </el-table-column> -->
      </el-table>
      <div style="margin-top: 15px">
        <template>
          <div class="pagination">
            <el-pagination v-show=" pagination.totalPage>0" :current-page="pagination.currentPage"
                           :page-sizes="[10, 25, 50, 100]"
                           :total="pagination.totalPage" background layout="prev, pager, next,sizes,total,jumper"
                           @current-change="queryFun" @size-change="handleSizeChange">
            </el-pagination>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
  import * as api from "@/api/baseDate";
  import util from "@/libs/util";
  import {queryHomeInfo} from "@/api/baseDate";

  export default {
    name: 'caseDealCache',
    data() {
      return {
        loading: false,//加载模态框
        // 分页初始化数据
        pagination: {
          currentPage: 1, // 当前页
          rowsNumber: 10, // 每页条数
          totalPage: 0 // 总条数
        },
        tableData: [],
        caseDisposeList: {}
      };
    },
    created() {
    },
    methods: {
      toCaseNo(row){
        if(row.taskState == '03'){
          this.toScan(row)
        }else{
          this.toDetail(row)
        }
      },
      //跳转查看
      toScan(e) {
        this.$router.push({
          name: 'caseProcessDetail',
          params: {
            caseNo: e.caseNo,
            taskId: e.taskId,
            damageDate: e.damageDate,
            policyNo: e.policyNo,
            serialNo:e.serialNo,
            name:"deal",
            tmp:"Tmp"
          }
        })
      },
       // 跳转登记
       toDetail(e) {
        this.$router.push({
          name: 'caseProcessDetail',
          params: {
            caseNo: e.caseNo,
            taskId: e.taskId,
            damageDate: e.damageDate,
            policyNo: e.policyNo,
            serialNo:e.serialNo,
            name:"deal"
          }
        })
      },
      //分页
      queryFun(pageNum) { // 改变当前页事件
        debugger
        this.pagination.currentPage = pageNum
        this.onSubmit();
      },
      handleSizeChange(pageSize){ // 改变当前页条数事件
        this.pagination.rowsNumber = pageSize;
        this.onSubmit();
      },
      onSubmit() {
        this.loading=true;
        api.queryCaseDisposeInfoList({
          "caseNo": this.caseDisposeList.caseNo,
          "insuredName": this.caseDisposeList.insuredName,
          "socialSecurityNo": this.caseDisposeList.socialSecurityNo,
          "insuredIdentifyNumber": this.caseDisposeList.insuredIdentifyNumber,
          "taskState": this.caseDisposeList.taskState,
          "pageNum": this.pagination.currentPage,
          "pageSize": this.pagination.rowsNumber,
          "handlerCode":Cookies.get("userCode")
        }).then(res => {
          this.tableData = res.data.list;
          this.pagination.totalPage = res.data.total;
          this.loading = false;
        })
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
    }
  };
</script>
<style lang="scss" scoped>
 /deep/.el-button--text{
    line-height: 3px
  }
</style>
